<template>
  <div class="category-content-wrapper">
    <div class="w-content">
      <div class="content-section d-flex">
        <div class="left-section h-100 fs-18">
          <div v-for="(category, index) in categoryList" :key="'category' + index" class="category-item d-flex flex-ai-c" :class="{ 'active': category.code === currentCategoryCode }" @click="changeCategory(category.code)">
            <div class="img_left" />
            <div>{{ category.name }}</div>
            <div class="img_right" />
          </div>
        </div>
        <div class="right-section h-100">
          <div v-for="(article, index) in articleList" :key="'article' + index" class="article-item" @click="toNewsDetail(article.id)">
            <div class="d-flex flex-ai-c flex-jc-sb fs-18">
              <div class="article-title fw-700">{{ article.title }}</div>
              <div class="article-time">{{ article.publishedTime | formatDate }}</div>
            </div>
            <div class="article-desc d-flex flex-ai-c c-999 fs-16">
              {{ article.abstractContent }}
            </div>
          </div>
        </div>
      </div>
      <div class="page-nav-wrap">
        <protal-pagination v-show="total>0" :total="total" :layout="layout" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryList" />
      </div>
    </div>
  </div>
</template>

<script>
import ProtalPagination from '../../components/Pagination'
import { articleList, categoryList } from '@/api/rest/portal/portal'
import { formatDate } from '@/utils/formatdate'
export default {
  name: 'CategoryContent',
  components: { ProtalPagination },
  filters: {
    formatDate(val) {
      if (val) {
        return formatDate(val)
      }
    }
  },
  props: {
    currentIndex: {
      type: Number,
      default: 0
    },
    parentCategoryCode: {
      type: String,
      default: ''
    },
    categoryTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      subCategoryImg: require('@/assets/portal_images/sub_category.png'),
      currentCategoryCode: '',
      layout: 'total, prev, pager, next',
      categoryList: [],
      total: 0,
      listQuery: {
        categoryCodes: '',
        page: 1,
        limit: 5
      },
      articleList: []
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    changeCategory(code) {
      this.currentCategoryCode = code
      this.getArticleList(code)
    },
    queryList() {
      articleList(this.listQuery).then(res => {
        this.articleList = res.data.items
        this.total = res.data.total
      })
    },
    toNewsDetail(id) {
      this.$router.push({ path: '/newsDetail', query: { id, currentIndex: this.currentIndex, categoryTitle: this.categoryTitle }})
    },
    getCategoryList() {
      if (this.parentCategoryCode !== '') {
        categoryList({ parentCode: this.parentCategoryCode }).then(res => {
          if (res.data && res.data.length > 0) {
            res.data.forEach((item, index) => {
              if (index === 0) {
                this.currentCategoryCode = item.code
                this.getArticleList(item.code)
              }
              this.categoryList.push(item)
            })
          }
        })
      }
    },
    getArticleList(categoryCode) {
      this.listQuery.page = 1
      this.listQuery.categoryCodes = categoryCode
      articleList(this.listQuery).then(res => {
        this.articleList = res.data.items
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.category-content-wrapper {
  background-color: #F9FAFC;
  height: 1016px;
  .content-section {
    height: 884px;
    .left-section {
      background-color: #F2F4F7;
      width: 240px;
      .img_left {
        width: 20px;
        height: 20px;
        background-image: url('~@/assets/portal_images/sub_category.png');
        margin-right: 6px;
      }
      .img_right {
        width: 12px;
        height: 12px;
        background-image: url('~@/assets/portal_images/right.png');
        margin-left: 6px;
      }
      .category-item {
        height: 72px;
        line-height: 72px;
        cursor: pointer;
        padding: 0 0 0 36px;
      }
      .active {
        font-weight: bold;
        color: $portalBlueColor;
        background-color: $portalWhiteColor;
        position: relative;
        .img_left {
          background-image: url('~@/assets/portal_images/sub_category_s.png');
        }
        .img_right {
          background-image: url('~@/assets/portal_images/right_s.png');
        }
      }
      .active:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 72px;
        background-color: $portalBlueColor;
        left: 0;
        top: 0;
      }
    }
    .right-section {
      background-color: #FFFFFF;
      width: 960px;
      color: #222222;
      .article-item {
        height: 176px;
        padding: 40px;
        border-bottom: 1px solid #F2F2F2;
        .article-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          width: 85%;
        }
        .article-title:hover {
          color: #005DF4;
          font-weight: bold;
        }
        .article-time {
          width: 15%;
          text-align: right;
        }
        .article-desc {
          margin-top:12px;
          line-height: 30px;
          height: 60px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          -webkit-line-clamp: 2; //显示几行
        }
      }
    }
  }

  .page-nav-wrap {
    text-align: center;
    margin-top: 40px;
  }
}
</style>
